<template>
  <div class="content">
    <!-- 查询条件 -->
    <div class="head media-head">
      <div class="public-title">
        <div class="title-fl">查询条件</div>
      </div>
      <div class="items">
        <span>项目名称:</span>
        <el-input
          class="proName"
          size="small"
          placeholder="请输入项目名称"
          v-model="parameter.xmmc"
          clearable
        >
        </el-input>
        <span>事项名称:</span>
        <el-input
          class="proName"
          size="small"
          placeholder="请输入事项名称"
          v-model="parameter.xmmc1"
          clearable
        >
        </el-input>
        <span>申报人:</span>
        <el-input
          class="proName"
          size="small"
          placeholder="请输入申报人"
          v-model="parameter.sbr"
          clearable
        >
        </el-input>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-search "
          class="iconfontdbot"
          >查询</el-button
        >
        <el-button
          type="primary"
          size="small"
          icon="el-icon-refresh"
          class="iconfontdbot"
          >重置</el-button
        >
      </div>
    </div>
    <!-- 列表部分 -->
    <div class="list-content">
      <div class="public-title">
        <div class="title-fl">列表</div>

        <div class="_rt">
          <div class="batch-handle">
            <el-button
              style="float: right"
              type="primary"
              size="small"
              icon="el-icon-circle-plus-outline"
              class="iconfontdbot"
              @click="add"
              >新建</el-button
            >
          </div>
        </div>
      </div>

      <el-table
        :data="tableData"
        :height="tableHeight"
        v-loading="loading"
        :header-cell-style="{ fontWeight: '500' }"
      >
        <el-table-column
          type="selection"
          width="45"
          ali="center"
        ></el-table-column>
        <el-table-column
          type="index"
          :index="typeIndex"
          label="序号"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column prop="handle" label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="'办理'"
              placement="top"
            >
              <i
                class="iconfont icbanli1"
                style="color: #0098ff"
                @click="onHandle(scope.row)"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              :content="'查看'"
              placement="top"
            >
              <i
                class="iconfont icbaopi1"
                style="color: #0098ff"
                @click="onView(scope.row)"
              ></i>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              :content="'催办详情'"
              placement="top"
            >
              <i
                class="iconfont iccuibanxiangqing1"
                style="color: #0098ff"
                @click="showUrgeDetail(scope.row)"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              :content="'回退详情'"
              placement="top"
            >
              <i
                class="iconfont ichuituixiangqing1"
                style="color: #0098ff"
                @click="showBackDetail(scope.row)"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态"></el-table-column>
        <el-table-column
          prop="projectName"
          min-width="150"
          label="项目名称"
        ></el-table-column>
        <el-table-column prop="itemName" label="事项名称"></el-table-column>
        <el-table-column prop="applyCompany" label="申请单位"></el-table-column>
        <el-table-column prop="applyPerson" label="申请人"></el-table-column>
        <el-table-column prop="applyTime" label="申请时间"> </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          v-if="total > 0"
          background
          :page-sizes="[20, 30, 50]"
          :page-size="parameter.limit"
          layout="total, sizes, prev, pager, next"
          prev-text="上一页"
          next-text="下一页"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!-- 添加弹框 -->
    <add-dialog
      :showaddDialog.sync="showaddDialog"
      @close="showaddDialog = false"
      @update="queryList"
    ></add-dialog>
  </div>
</template>
<script>
import { getnosendList } from "@/api/zhbl/zhbl.js";
import addDialog from "./components/dialogs/addDialog.vue";

const fixHeight = 340;
export default {
  components: { addDialog },
  name: "name",

  data() {
    return {
      showaddDialog: false,
      loading: false,
      tableHeight: window.innerHeight - fixHeight, //表格高度
      total: 0,
      timer: false,
      parameter: {
        limit: 20,
        page: 1,
      },
      tableData: [],
    };
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        that.tableHeight = window.innerHeight - fixHeight;
      })();
    };
    this.queryList();
  },
  watch: {
    tableHeight(val) {
      if (!this.timer) {
        this.tableHeight = val;
        this.timer = true;
        const that = this;
        setTimeout(function () {
          that.timer = false;
        }, 400);
      }
    },
  },
  methods: {
    // 查询组件传出来的查询参数
    queryParams(val) {
      Object.assign(this.parameter, val);
      this.queryList();
    },
    typeIndex(index) {
      //处理分页数据的 index
      return (this.parameter.page - 1) * this.parameter.limit + index + 1;
    },
    //查询
    queryList() {
      this.loading = true;
      getnosendList(this.parameter)
        .then((res) => {
          this.loading = false;
          console.log(res);
          this.tableData = res.data.result.records;
          console.log(this.tableData);
          this.total = res.data.result.total;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //分页
    handleCurrentChange(val) {
      this.parameter.page = val;
      this.queryList();
    },
    //分页
    handleSizeChange(val) {
      this.parameter.limit = val;
      this.queryList();
    },
    onView(data) {
      console.log(data);
      this.$router.push({
        path: "/checkzhbox",
        query: {
          id: data.businessId,
        },
      });
    },
    add() {
      console.log(123);
      this.showaddDialog = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.head {
  background: #ffffff;
  padding: 12px 0;
  box-shadow: 0px 0px 12px #eaeeef;
  padding-bottom: 22px;
  .public-title {
    margin-bottom: 12px;
    display: flex;

    position: relative;
    &:before {
      position: absolute;
      top: 50%;
      height: 15px;
      display: block;
      content: "";
      transform: translate(0, -50%);
      border-left: 3px solid #3385ff;
    }
    .title-fl {
      float: left;
      padding-left: 20px;
      height: 28px;
      line-height: 28px;
      font-size: 15px;
      color: #434654;
      font-weight: 700;
    }

    .title-fr {
      margin-left: auto;
      padding-right: 22px;
    }
    ._rt {
      display: flex;
      justify-content: end;
      .batch-handle {
        margin-right: 25px;
        /deep/ .icbanli1 {
          color: #fff !important;
        }
      }
    }
  }
  .items {
    display: inline-block;
    position: relative;
    span {
      color: #7c8195;
      margin-right: 8px;
      font-size: 12px;
      height: 26px;
      line-height: 26px;
      display: inline-block;
      vertical-align: middle;
      margin-left: 18px;
    }
    .proName {
      width: 185px;
    }
    .iconfontdbot {
      margin-left: 15px;
    }
  }
}
.content {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}
  .list-content .public-title {
    display: flex !important;
    justify-content: space-between !important;
    .title-fl {
      line-height: 34px;
    }
    ._rt {
      display: flex;
      justify-content: start;
      .batch-handle {
        margin-right: 25px;
        /deep/ .icbanli1 {
          color: #fff !important;
        }
      }
    }
  }
.list-content {
  margin: 16px 0;
  padding: 12px 0;
  background: #fff;
  box-sizing: border-box;
}
/deep/ .el-pagination__total {
  float: left;
  margin-left: 10px;
}
.iconfont {
  color: #3385ff;
}
.iconfontdbot {
  margin-left: 18px;
}

.page {
  text-align: right;
  margin-top: 10px;
  position: relative;
  .Tips {
    position: absolute;
    left: 100px;
    top: 8px;
    span {
      color: #7c8195;
      font-size: 12px;
      margin: 0px 10px;
    }
  }
}
</style>
